import { useEffect } from "react";
import Phaser, { Game } from "phaser";
import MainScene from "./scenes/MainScene";

function initPhaser() {
  // game配置
  const config = {
    type: Phaser.AUTO,
    parent: "phaser-game",
    width: "100%",
    height: "100%",
    scale: {
      mode: Phaser.Scale.RESIZE,
      autoCenter: Phaser.Scale.CENTER_BOTH,
    },
    physics: {
      default: "arcade",
      arcade: {
        gravity: { y: 200 },
        debug: false,
      },
    },
    transparent: true,
    scene: [MainScene],
  };
  window.game = new Game(config);
}

function GameDemo(props) {
  useEffect(() => {
    initPhaser();
  }, []);

  return (
    <>
      <div id="phaser-game"></div>
    </>
  );
}

export default GameDemo;
